<template>
    <ph-flex :class="cns" justify="flex-start">
        <slot></slot>
    </ph-flex>
</template>
<script lang="ts">
import { computed, defineComponent } from 'vue'
import PhFlex from './flex.vue'
export default defineComponent({
    props:{
        container:{type:Boolean},
    },
    setup(props){
        const cns = computed(()=>{
            return {
                'ph-btn-group':true,
                'ph-btn-container':props.container
            }
        })
        return {cns}
    },
    components:{PhFlex}
})
</script>
<style lang="scss">
.ph-btn-group{
    flex: 0 0 auto;
    width: 100%;
    padding: var(--ph-15) 0;
    margin-bottom: var(--ph-15);
    flex-wrap: wrap;
}
.ph-btn-container{
    column-gap: 4px;
    row-gap: 4px;
    gap:4px 4px;
}
</style>
